import React, { useEffect, useState, useRef } from 'react'
import { Pagination, Modal, Button, Form, Space, Table, Input } from 'antd'
import axios from 'axios'
import MyModel from '../../components/model/MyModel'
import { connect } from 'react-redux'
import { actionCreator } from '../../store/reducer'

const Home = (props) => {
  // 保存编辑时候的每一条数据，方便取到他的id
  const [itemRecord, setItemRecord] = useState({})
  // 按钮状态，帮助判断是添加还是编辑
  const [msg, setMsg] = useState('')
  // 弹出框显示隐藏按钮
  const [isModalVisible, setIsModalVisible] = useState(false)
  // store数据仓库内容 redux
  const { tableList, total, dispatch } = props

  // 点击编辑弹出框的确定按钮的事件
  const handleOk = async (values) => {
    // 判断弹出框是编辑还是添加
    if (msg === 'edit') {
      await axios.post('/api/editItem', { ...itemRecord, ...values })
    } else {
      await axios.post('/api/addItem', { ...itemRecord, ...values })
    }
    fetchList({})
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  // 初始化数据 使用thunk处理
  const fetchList = () => {
    dispatch(actionCreator.init_table_list())
    // axios.get('/api/list').then((res) => {
    //   console.log('res:', res.data.data)
    //   let data = res.data.data
    //   data.list.forEach((item) => {
    //     item.key = item.id
    //   })
    //   dispatch({
    //     type: 'init_table_list',
    //     payload: { list: data.list, total: data.total },
    //   })
    // })
  }

  useEffect(() => {
    fetchList({})
  }, [])

  useEffect(() => {
    console.log('list:', tableList)
  }, [tableList])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id', // 要跟数据字段保持一致
      key: 'id',
    },
    {
      title: '班级名字',
      dataIndex: 'itemClass',
      key: 'itemClass',
    },
    {
      title: '课程名字',
      dataIndex: 'course',
      key: 'course',
    },
    {
      title: '操作',
      // dataIndex: 'course',
      key: 'course',
      render(text, record) {
        return (
          <>
            <Space size="middle">
              <a
                onClick={() => {
                  // console.log(text, record)
                  setMsg('edit')
                  setItemRecord(record)
                  setIsModalVisible(true)
                }}
              >
                编辑
              </a>
              <a
                onClick={() => {
                  axios.get('/api/deleteItem', { params: { id: record.id } }).then((res) => {
                    fetchList({})
                  })
                }}
              >
                删除
              </a>
            </Space>
          </>
        )
      },
    },
  ]

  return (
    <div>
      <Button
        onClick={() => {
          setMsg('add')
          setIsModalVisible(true)
          setItemRecord({ itemClass: '', className: '', course: '' })
        }}
      >
        添加按钮
      </Button>

      <Table dataSource={tableList} total={total} columns={columns} />

      <MyModel
        data={itemRecord}
        isModalVisible={isModalVisible}
        handleOk={handleOk}
        handleCancel={handleCancel}
      ></MyModel>
    </div>
  )
}

export default connect(
  (state) => {
    return { ...state }
  },
  (dispatch) => {
    return { dispatch }
  }
)(Home)
